/*
 * 用户列表
 * @Author: ljb
 * @Date: 2018-04-20 17:38:08
 * @Last Modified by: ljb
 * @Last Modified time: 2018-08-20 09:01:40
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

</style>
<template>
	<div class="v-home-customer-wechat-user-index">

		<Table
			:columns="columns"
			:loading="loading"
			:data="wechatUsers"
			class="no-table-border no-scrollbar"
			border
			height="350" />

	</div>
</template>

<script>

export default {
	name: 'WechatUserIndex',
	props: {
		loading: {
			type: Boolean,
			required: true,
		},
		wechatUsers: {
			type: Array,
			required: true,
		},
	},
	data() {
		return {
			columns: [
				{
					title: this.$t('home.headimgurl'),
					key: 'headimgurl',
					align: 'center',
					render: (h, { row }) => <div>
						{
							row.headimgurl
								? <img src={ row.headimgurl } alt="" width="50%"/>
								: this.$t('common.none')
						}
					</div>,
				},
				{
					title: this.$t('home.nickname'),
					key: 'nickname',
					align: 'center',
					render: (h, { row }) => <div> { row.nickname || '-' } </div>,
				},
				{
					title: this.$t('home.phone'),
					key: 'phone',
					align: 'center',
					render: (h, { row }) => <div> { row.phone || '-' } </div>,
				},
				{
					title: this.$t('home.gender'),
					key: 'sex',
					align: 'center',
					render: (h, { row }) => <div> { this.showGender(row.sex) } </div>,
				},
				{
					title: this.$t('home.user_address'),
					key: 'province',
					align: 'center',
					render: (h, { row }) => <div> { (row.country + row.province + row.city) || '-' } </div>,
				},

			],
		};
	},
	methods: {

		/**
         * 性别展示
         * @param  {string} sex {性别}
         * @return {string} {性别展示}
         */
		showGender(sex) {
			switch (parseInt(sex, 10)) {
			case 1:

				return this.$t('home.male');

			case 2:

				return this.$t('home.female');

			default:

				return this.$t('home.unknown');
			}
		},

	},
};
</script>
